<template>
	<view class="page-fade-in" :style="{opacity: pageOpc}">
		<template v-if="pageOpc">
			<view class="content">
				<!-- <uni-notice-bar show-icon scrollable :text="note" v-if="note" :speed='50' color="#FFB700" :fontSize="11" background-color="#1D1C5C"/> -->
				<view class="balance-box flexWrap">
					<view class="balance-left flexWarpColumn">
						<view class="balance"><text class="balance-icon">¥</text> {{wallet}}</view>
						<view>卡余额</view>
					</view>
					<view class="balance-image">
						<image src="../../static/user/goldcoin.png"></image>
					</view>
				</view>
				<view class="charge-box">
					<view class="charge-title">
						选择充值金额
					</view>
					<view class="charge-cont flexWrap">
						<view class="charge-item flexWarpCenterColumn" @tap="changeMoney(index)" :class="{active:currmentIndex==index}" v-for="(item,index) in chargeList" :key='index'>
							<view class="money">{{item.amount_money}}</view>
							<view>充{{item.amount_money}}送{{item.give_money}}</view>
						</view>
					</view>
				</view>
				<view class="exeplan-box">
					预充值均属于特价商品，售出不退
				</view>
				<view class="exeplan-box" style="font-size: 28upx;">
					登录后无内容请下拉刷新
				</view>
				<view class="determine-box">
					<view class="determine-btn" @tap="confirmRecharge()">确定充值{{chargeList[currmentIndex].amount_money||0}}元</view>
				</view>
				<view class="tips-box flexWarpCenterColumn" v-if="tipsFlage">
					<view class="tips-image">
						<image src="../../static/public/success-icon.png"></image>
					</view>
					<view class="tips-name">充值成功</view>
					<view class="tips-text">充值金额：{{chargeList[currmentIndex].amount_money}}元</view>
					<view class="tips-btn" @tap="closeTips()">知道了</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageOpc:0,
				chargeList:[],
				currmentIndex:0,
				tipsFlage:false,
				wallet:0,
				note:""
			}
		},
		onReady(){
			setTimeout(() => {
				this.pageOpc=1
			}, 100)
		},
		onLoad(ops) {
			if(ops&&ops.store_id){
				uni.setStorageSync('store_id',ops.store_id)
			}
			if(!uni.getStorageSync('token')){
				uni.showModal({
					title: '未登录',
					content: '请先登录',
					success: function(res) {
						if(res.confirm){
							uni.navigateTo({
								url: "/pages/login/login"
							});
						}
					}
				});
			}else{
				this.getRechargeList()
				this.getUserInfo();
			}
		},
		// 下拉刷新
		onPullDownRefresh: function() {
			this.getRechargeList();
			this.getUserInfo();
			this.$tools.loadIng()
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 500)
		},
		methods: {
			changeMoney(index){
				this.currmentIndex=index
				this.note=this.chargeList[index].remarks
			},
			showTips(){
				this.tipsFlage=true
			},
			closeTips(){
				this.tipsFlage=false
			},
			// 充值列表
			getRechargeList(){
				this.$request.post(this.$api.rechargeList, {
					store_id:uni.getStorageSync('store_id')
				}, {
					token:true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==1) {
						this.chargeList=data
						this.note=this.chargeList[0].remarks
					}
				})
			},
			// 确认充值
			confirmRecharge(){
				if(this.chargeList.length==0){
					this.$tools.showToast("商家暂未设置充值金额");
					return;
				}
				this.$jiuaiDebounce.canDoFunction({
					key: 'confirmRecharge', //基于此值判断是否可以操作，如两个方法传入了同样的key，则会混淆，建议传入调用此事件的方法名，简单好梳理
					time: 2000, //如果传入time字段，则为定时器后，自动解除锁定状态，单位（毫秒）
					success: () => { //成功中调用应该操作的方法，被锁定状态不会执行此代码块内的方法
						this.$request.post(this.$api.confirmRecharge, {
							store_id:uni.getStorageSync('store_id'),
							id:this.chargeList[this.currmentIndex].id
						}, {
							token:true
						}).then(res => {
							let {
								data = {}
							} = res;
							if (res.code==1) {
								this.appletPay(data)
							}
						})
					}
				})
			},
			appletPay(data) {
				let that = this
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: data.timeStamp,
					nonceStr: data.nonceStr,
					package: data.package,
					signType: 'MD5',
					paySign: data.paySign,
					success(res) {
						console.log('success:' + JSON.stringify(res));
						that.$tools.showToast("支付成功");
						setTimeout(() => {
							that.getUserInfo()
							that.showTips()
						}, 1000)
					},
					fail(err) {
						console.log(err);
						that.$tools.showToast('支付取消')
					},
					complete(result) {
						
					}
				});
			},
			getUserInfo(){
				this.$request.post(this.$api.userInfo, {
					store_id:uni.getStorageSync('store_id')
				}, {
					token:true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==1) {
						this.wallet=data.wallet
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.content{
		padding: 36upx;
	}
	.balance-box{
		.balance-left{
			width: 382upx;
			height: 160upx;
			background:linear-gradient(90deg, #FFB726 0%, rgba(255,183,38,0) 100%);
			border-radius: 16upx;
			font-size: 24upx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 34upx;
			color:#6E6E6E;
			justify-content: center;
			padding-left: 40upx;
			.balance{
				font-size: 48upx;
				font-family: PingFang SC;
				font-weight: 500;
				line-height: 66upx;
				color: #333;
				.balance-icon{
					font-size: 24upx;
					font-family: PingFang SC;
					font-weight: 400;
					line-height: 34upx;
					color: #333;
					margin-right: 14upx;
				}
			}
		}
		.balance-image{
			width: 254upx;
			height: 254upx;
			flex:none;
		}
	}
	.charge-box{
		.charge-title{
			font-size: 36upx;
			font-family: PingFang SC;
			font-weight: 500;
			line-height: 50upx;
			color: #333;
		}
		.charge-cont{
			margin-top: 44upx;
			flex-wrap: wrap;
			.charge-item{
				width: 328upx;
				height: 180upx;
				background:#fff;
				border-radius: 16upx;
				font-size: 28upx;
				font-family: PingFang SC;
				font-weight: 500;
				line-height: 40upx;
				color: #333;
				justify-content: center;
				margin-bottom: 28upx;
				.money{
					font-size: 48upx;
					font-family: PingFang SC;
					font-weight: 500;
					line-height: 66upx;
					color: #333;
				}
			}
			.active{
				background:#FFB726;
			}
		}
	}
	.exeplan-box{
		font-size:32upx;
		text-align: center;
		color:#FF5150;
	}
	.determine-box{
		height: 120upx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		.determine-btn{
			width: 398upx;
			height: 80upx;
			line-height: 80upx;
			background:#FFB726;
			border-radius: 16upx;
			font-size: 36upx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333;
			text-align: center;
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			margin: auto;
		}
	}
	.tips-box{
		width: 660upx;
		height: 502upx;
		background:#fff;
		border-radius: 16upx;
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		.tips-image{
			width: 80upx;
			height: 80upx;
			margin-top: 62upx;
		}
		.tips-name{
			font-size: 36upx;
			font-family: PingFang SC;
			font-weight: 500;
			line-height: 50upx;
			color: #333;
			margin-top: 36upx;
		}
		.tips-text{
			font-size: 32upx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 44upx;
			color: #333;
			margin-top: 32upx;
		}
		.tips-btn{
			width: 286upx;
			height: 80upx;
			line-height: 80upx;
			text-align: center;
			border: 2upx solid #FFB726;
			border-radius: 16upx;
			font-size: 36upx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333;
			margin-top: 52upx;
		}
	}
</style>
